<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动界面</title>
</head>
<body>
    <div class="app-sport dpflex fdcolumn">
        <!-- 头部 -->
        <div class="header">
            <p>户外跑</p>
            <div class="head-kinds dpflex">
                <span>运动中</span>
                <div class="kinds">
                    <span class="iconfont icon-yinle"></span>
                    <span class="iconfont icon-shezhi1"></span>
                </div>
            </div>

        </div>
        <!-- 数据 -->
        <div class="data dpflex">
            <p class="text1">99.99</p>
            <p class="text2">公里</p>
        </div>
        <!-- 信号 -->
        <div class="messige dpflex">
            <p>GPS信号度低, 数据精准度低</p>
            <span class="line"></span>
            <span class="icon iconfont icon-ditu"></span>
        </div>
        <!-- 配速 用时 千卡 -->
        <div class="time dpflex">
            <div class="nav-icons">
                <span class="icon iconfont icon-sudu"></span>
                <p>配速</p>
                <p class="test">--</p>
            </div>
            <div class="nav-icons">
                <span class="icon iconfont icon-icon_daojishi"></span>
                <p>用时</p>
                <p class="test">00:00:20</p>
            </div>
            <div class="nav-icons">
                <span class="icon iconfont icon-huo"></span>
                <p>千卡</p>
                <p class="test">3000</p>
            </div>
        </div>
        <!-- 暂停 锁定 -->
        <div class="stop dpflex">
            <div class="flex1"></div>
            <div class="stop-to dpflex">
                <span class="icon iconfont icon-ai07"></span>
                <p>暂停</p>
            </div>
            <div class="st-right flex1 dpflex">
                <span class="iconfont icon-suoding"></span>
            </div>
        </div>

        <!-- 蒙层 -->
        <div class="mask dpflex">
            <div class="continue dpflex">
                <span class="icon iconfont icon-bofang"></span>
                <p>继续</p>
            </div>
            <div class="ended dpflex">
                <span class="icon iconfont icon-jieshu"></span>
                <p>结束</p>
            </div>
        </div>
    </div>
</body>
</html>